/*
 * @Author: 雷小天 
 * @Date: 2021-10-13 15:12:10 
 * @Last Modified by: 雷小天
 * @Last Modified time: 2021-12-22 17:42:24
 */

<template>
    <div class="layui-container fly-marginTop">
      <div class="fly-panel" pad20 style="padding-top: 5px;">
        <!--<div class="fly-none">没有权限</div>-->
        <div class="layui-form layui-form-pane">
          <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
              <li class="layui-this">发表新帖<!-- 编辑帖子 --></li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
              <div class="layui-tab-item layui-show">
                <form action=""  @submit.prevent="onSubmit" method="post">
                  <input type="hidden" name="__token__" value="{$token}" />
                  <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-md3">
                      <label class="layui-form-label">所在专栏</label>
                      <div class="layui-input-block">
                        <el-select v-model="ruleForm.type" placeholder="请选择" >
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="layui-col-md9">
                      <label for="L_title" class="layui-form-label">标题</label>
                      <div class="layui-input-block">
                        <input type="text" id="L_title" v-model="ruleForm.title" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
                        <!-- <input type="hidden" name="id" value="{{d.edit.id}}"> -->
                      </div>
                    </div>
                  </div>
                  
                  <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block">
                      <textarea id="L_content" v-model="ruleForm.content" name="content" required lay-verify="required" placeholder="详细描述" class="layui-textarea fly-editor" style="height: 260px;"></textarea>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <label class="layui-form-label">悬赏飞吻</label>
                      <div class="layui-input-inline" style="width: 190px;">
                        <el-select v-model="ruleForm.reward" placeholder="请选择" >
                          <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <div class="layui-form-mid layui-word-aux">发表后无法更改飞吻</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_vercode" class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                      <input type="text" id="verify" v-model="ruleForm.code" name="verify" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">
                      <img id="verify_img" :src="host+'/micro-bbs/v2/captcha/image/'+captcha_id" alt="验证码" @click="refreshVerify" style="height: 38px;margin-top: -6px;">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <button class="layui-btn" lay-filter="*" lay-submit>立即发布</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { ref } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import Cookies from 'js-cookie'
export default {
   components: {
    // Right,
  },
  setup() {
    return {
      options: ref([
        {
          value: 1,
          label: '提问',
        },
        {
          value: 2,
          label: '分享',
        },
        {
          value: 3,
          label: '讨论',
        },
        {
          value: 4,
          label: '建议',
        },
        {
          value: 5,
          label: '公告',
        },
        {
          value: 6,
          label: '动态',
        },
      ]),
      options2: ref([
        {
          value: 20,
          label: '20',
        },
        {
          value: 30,
          label: '30',
        },
        {
          value: 50,
          label: '50',
        },
        {
          value: 60,
          label: '60',
        },
        {
          value: 80,
          label: '80',
        },
      ]),
      value: ref(''),
      value2: ref(''),
    }
  },
  data() {
    return {
      ruleForm: {
          title: '',
          type: '',
          content: '',
          reward: 0,
          code: '',
          captcha_id: '',
      },
      id: 0, //ID
      title: "", //标题
      address: "bbs.100txy.com", //地址
      data: {
        user_info: {}
      }, //帖子详情
      comment: [], // 帖子评论列表
      captcha_id: "",
      host: "http://127.0.0.1:8080"
    };
  },
  mounted(){
    console.log(this.$route),
    this.refreshVerify()
    // this.get_host()
  },
  methods: {
    //获取帖子详情
    getDetail(id) {
      const params = {
        params: {
        }
      }
      request.get('/micro-bbs/v1/post/'+id, params).then((res) => {
        const { code, data } = res
        // this.notifySucceed(message);
        if (code === 200) {
          this.title = data.title
          this.data = data.data
          this.comment = data.comment
          ElMessage({
              message: '数据加载成功!',
              type: 'success',
              offset: 200
           })
        }
      })
    },
    //获取验证码
    refreshVerify() {
      const params = {
        params: {
        }
      }
      request.get('/micro-bbs/v2/captcha/generate', params).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.captcha_id = data.id
        }
      })
    },
    //获取本机host
    get_host(){
       // 获取当前页面地址，如http://localhost:8080/admin/index
      let wPath = window.document.location.href;
      // 获取当前页面主机地址之后的目录，如：/admin/index
      let pathName =  this.$route.path;
      let pos = wPath.indexOf(pathName);
      // 获取主机地址，如：http://localhost:8080
      let localhostPath = wPath.substring(0, pos);
      console.log("host:",localhostPath)
    },
    onSubmit() {
      //判断用户是否登录
      if(Cookies.get('app.token') != ""){
        console.log("有token")
        this.addPost() //发布帖子
      }else{
        ElMessage({
              message: '发帖请先登录!',
              type: 'error',
              offset: 200,
        })
      }
    },
    //发布帖子
    addPost(){
      this.ruleForm.captcha_id = this.captcha_id
      console.log("ruleForm:",this.ruleForm)
      request.post('/micro-bbs/v2/members/post/add', this.ruleForm).then((res) => {
        const { code, data,msg } = res
        if (code === 200) {
          console.log("data:",data)
          ElMessage({
              message: "恭喜你，发布成功！",
              type: 'success',
              offset: 200,
          })
          this.$router.push("/")
        }else{
           ElMessage({
              message: msg,
              type: 'error',
              offset: 200,
          })
          this.refreshVerify()
        }
      })
    }

  }
}
</script>

<style>
.el-select .el-input__inner{
  height: 38px !important;
}
</style>